import { useEffect } from "react"
import * as THREE from 'three'
import { TextGeometry } from 'three/addons/geometries/TextGeometry'
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-10-19 11:35:36
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-10-19 16:55:14
 * @FilePath: /three-react/src/pages/Base.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

const width = window.innerWidth - 200;
const height = window.innerHeight








function createRender(width, height) {

  // 创建场景
  const scene = new THREE.Scene();
  // 创建相机
  const camera = new THREE.PerspectiveCamera(45, width / height, 1, 500);
  camera.position.z = 5;
  // 创建webgl渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器窗口大小
  renderer.setSize(width, height);
  document.getElementById("container")?.appendChild(renderer.domElement);


  const fontLoader = new FontLoader();
  fontLoader.load('https://threejs.org/examples/fonts/optimer_bold.typeface.json', function (font) {
    // 创建几何体
    const geometry = new TextGeometry('three js', {
      font:font,
      size: 1, // 文本大小
      height: 0.1, // 文本厚度
    })
    // 创建基础材质
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    // 创建一个网格将几何体和材质组合在一起
    const mesh = new THREE.Mesh(geometry, material)
    mesh.position.set(-2, 0, 0);
    // 将组合好的几何体加入到场景中
    scene.add(mesh)




    function animate() {
      requestAnimationFrame(animate)
      mesh.rotation.x += 0.01;
      // mesh.rotation.y += 0.01;
      // 渲染场景
      renderer.render(scene, camera);
    }

    animate();
  });

  return renderer
}
export default function Lines() {
  useEffect(() => {
    if (!window.isMounted) {
      createRender(width, height);
      window.isMounted = true;
    }
  }, [])
  return (
    <div id="container"></div>
  )
}